<!-- 空间预约弹框 -->
<template>
    <el-dialog title="新增" :visible.sync="addSpaceDialogVisible" width="60%" :before-close="handleClose">
        <div>
            <el-form :inline="true" :model="addbespeak" class="demo-form-inline" label-position="right"
                label-width="100px" size="medium">
                <h4>基本信息</h4>
                <el-form-item label="空间名称">
                    <el-input v-model="addbespeak.speakName" placeholder="请输入空间名称"></el-input>
                </el-form-item>
                <el-form-item label="所属分类">
                    <el-select v-model="addbespeak.spatialClassification" placeholder="请选择类别">
                        <el-option v-for="item in spatialClassificationList" :key="item.value"
                            :label="item.spatialClassificationName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最少人数">
                    <el-input v-model="addbespeak.personmixnum" placeholder="请输入最少人数"></el-input>
                </el-form-item>
                <el-form-item label="最多容纳人数">
                    <el-input v-model="addbespeak.personmaxnum" placeholder="请输入最多容纳人数"></el-input>
                </el-form-item>
                <el-form-item label="开放状态">
                    <el-select v-model="addbespeak.openState" placeholder="选择类别">
                        <el-option label="关闭" value="1"></el-option>
                        <el-option label="开启" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="addbespeak.address" placeholder="请输入详细地址"></el-input>
                </el-form-item>
                <el-form-item label="空间封面">
                    <el-upload action="your-upload-url" list-type="picture-card" :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload"
                        :file-list="fileList" :limit="1" :on-exceed="handleExceed" :http-request="customRequest">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisiblePreview">
                        <img width="100%" :src="addbespeak.dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <h4>开放日期</h4>
                <p>请设置空间开放日期，不填写则代表改星期下全天开放，禁用则代表该星期不开放，不可预约时间则代表该时间段内不支持预约使用。</p>

                <el-table :data="tableData" style="width: 100%" border :highlight-current-row="false"
                    :current-row-key="null">
                    <el-table-column prop="week">
                        <template slot-scope="scope">
                            <div style="display: flex; justify-content: space-between;">
                                <span>{{ scope.row.week }}</span>
                                <el-button size='mini' @click="forbidden(scope.row)">禁用</el-button>
                            </div>
                        </template>

                    </el-table-column>
                    <el-table-column prop="name">
                        <template #header>
                            <div style="display: flex;justify-content: space-between;">
                                <span>开放时间</span>
                                <el-button size="mini">统一设置</el-button>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <el-time-picker size="small" align="center" is-range v-model="scope.row.openingTime"
                                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                placeholder="选择时间范围">
                            </el-time-picker>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address">
                        <template #header>
                            <div style="display: flex;justify-content: space-between;">
                                <span>不可预约时间</span>
                                <el-button size="mini">统一设置</el-button>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <el-time-picker size="small" align="center" is-range v-model="scope.row.closeTime"
                                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                placeholder="选择时间范围">
                            </el-time-picker>
                        </template>
                    </el-table-column>
                </el-table>

                <h4>预约规则</h4>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="预约最短时间">
                            <el-input v-model="addbespeak.mixTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" style="margin-top: 8px;">min</el-col>
                    <el-col :span="7">
                        <el-form-item label="预约最长时间">
                            <el-input v-model="addbespeak.maxTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" style="margin-top: 8px;">min</el-col>
                    <el-col :span="4"></el-col>
                </el-row>


            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addSpaceDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSpaceDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
            // 空间分类列表
            spatialClassificationList: [
                { spatialClassificationName: '实验室', id: 1 },
                { spatialClassificationName: '图书馆', id: 2 },
            ],
            addSpaceDialogVisible: false,
            fileList: [],

            dialogVisiblePreview: false,
            // 新增列表
            addbespeak: {
                // 空间名称
                speakName: '',
                // 空间所属分类
                spatialClassification: '',
                // 最少人数
                personmixnum: '',
                // 最多容纳人数
                personmaxnum: '',
                // 图片地址
                dialogImageUrl: '',
                // 开放状态
                openState: '',
                // 详细地址
                address: '',
                // 最短时间
                mixTime: '',
                // 最长时间
                maxTime: ''

            },

            tableData: [{
                week: '周一',
                openingTime: '',
                closeTime: ''
            }, {
                week: '周二',
                openingTime: '',
                closeTime: ''
            }, {
                week: '周三',
                openingTime: '',
                closeTime: ''
            }, {
                week: '周四',
                openingTime: '',
                closeTime: ''
            }, {
                week: '周五',
                openingTime: '',
                closeTime: ''
            }, {
                week: '周六',
                openingTime: '',
                closeTime: ''
            },
            {
                week: '周日',
                openingTime: '',
                closeTime: ''
            }
            ]
        };
    },
    methods: {
        forbidden(e) {
            console.log(e);
        },
        // 弹窗关闭
        handleClose() {

        },
        openDialog() {
            this.addSpaceDialogVisible = true;
        },
        submitForm() {
            // 提交表单逻辑
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.fileList = [];
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisiblePreview = true;
        },
        handleRemove(file, fileList) {
            // 处理移除文件逻辑
        },
        handleSuccess(response, file, fileList) {
            // 处理上传成功逻辑
        },
        beforeUpload(file) {
            // 上传前逻辑
        },
        handleExceed(files, fileList) {
            // 处理超出限制逻辑
        },
        customRequest(option) {
            // 自定义上传逻辑
        },
    },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog__body {
    padding: 10px 30px;
}

h4 {
    position: relative;
    margin-left: 20px;

    &::before {
        position: absolute;
        left: -10px;
        content: '';
        width: 4px;
        height: 20px;
        background-color: #cfcfcf;
    }
}

p {
    margin-left: 10px;
    width: 85%;
    background-color: #e6e6e6;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
}
</style>